<!--
 * @Description: 
 * @version: 
 * @Author: King
 * @Date: 2022-03-03 18:24:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-26 10:43:59
-->
<template>
  <div id="app">
    <NavMenu class="app-nav"/>
    <div id="bodying">
      <NavTop class="app-top"/>
      <CenterBody class="app-body" />
    </div>
  </div>
</template>

<script>
import NavMenu from './components/NavMenu.vue'
import CenterBody from './components/CenterBody.vue'
import NavTop from './components/NavTop.vue'
export default {
  name: "app",
  components:{NavMenu,NavTop,CenterBody}
};
</script>

<style lang="scss">
// 隐藏滚动条（ie不支持）-->主要用来取消掉右侧主屏在y轴上超出的滚动条
::-webkit-scrollbar{
    width: 0;
}
* {
  margin: 0;
  padding: 0;
  /* // 没有用 */
  box-shadow: border-box;
}
#app{
  display: flex;
  // overflow-x: hidden;
  // height: 100vh;
  .app-nav {
    // background-color: #545c64;
    flex-shrink: 0;
    width: 200px;
  }
  #bodying{
    width: calc(100vw - 200px);
    .app-top{
      height: 61px;
    }
    .app-body{
      height: calc(100vh - 61px);
      overflow: auto; //使其内容高度不变，超出出现滚动条
    }
  }
}
</style>
